<template>
	<div id="home-video-list">
		<mu-container>
			<h2>
				高考加油视频 <mu-badge content="new" color="secondary"></mu-badge>
			</h2>
			<mu-linear-progress
				:color="themeColor.progress.color"
			></mu-linear-progress>
			<mu-row gutter class="sm-center">
				<mu-col
					span="6"
					sm="6"
					lg="3"
					xl="3"
					v-for="item in videoInfoList"
					:key="item.id"
				>
					<mu-card>
						<mu-card-media
							:sub-title="item.title"
							@click="$emit('item-click', item)"
						>
							<img :src="item.imgUrl" :alt="item.title" />
						</mu-card-media>
					</mu-card>
				</mu-col>
			</mu-row>
		</mu-container>
	</div>
</template>

<script lang="ts">
import { createComponent, computed } from "@vue/composition-api";
import videoInfoList from "/utils/video-info";
export default createComponent({
	name: "home-video-list",
	setup(_, ctx) {
		const themeColor = computed(() => ctx.root.$store.state.theme.theme);
		return { videoInfoList, themeColor };
	}
});
</script>

<style lang="less">
#home-video-list {
	margin-top: 35px;
	h2 {
		font-size: 1.5rem;
		font-weight: 200;
		padding-left: 15px;
		padding-bottom: 5px;
		@media screen and (max-width: 768px) {
			font-size: 1.2rem;
			text-align: center;
			padding-left: 0px;
			.mu-badge {
				display: none;
			}
		}
	}
	.mu-card {
		margin: 20px 0px;
		&:hover {
			transform: scale(1.05);
		}

		.mu-card-media-title {
			
			@media screen and (max-width: 768px) {
				padding: 10px;
				text-align: center;
			}
		}
	}

	.sm-center {
		@media screen and (max-width: 768px) {
			display: flex;
			justify-content: center !important;
		}
	}

	.mu-card {
		cursor: pointer;
		.mu-card-media {
			img {
				height: 180px;
				@media screen and (max-width: 992px) {
					height: 200px;
				}
				@media screen and (max-width: 768px) {
					height: 120px;
				}
			}
		}
	}
}
</style>
